/*
 * @Author: your name
 * @Date: 2021-12-22 20:11:56
 * @LastEditTime: 2022-04-13 00:55:07
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /visualNotes/src/components/Node/ActionStatus/index.tsx
 */
import React , { useState }from "react";
import { Handle, Position } from "react-flow-renderer";  
import { NodeProps } from "..";  
import { useSelector } from "react-redux";  
import { RootState } from "@/store";  
import EditMenu from "../EditMenu";  
import { IconFont } from "@/utils/help";   
import style from "./index.module.less";  
  
const ActionStatus = (props: NodeProps) => {  
  const { id } = props;  
  const { flowData } = useSelector((state: RootState) => state.diagram);  
  const currentNode = flowData?.get(id) || {};  
  
  const [handleScale, setHandleScale] = useState(1);   
  
  const handleMouseEnter = () => {   
    setHandleScale(2);   
  };  
  
  const handleMouseLeave = () => {  
    setHandleScale(1);   
  };  
  
  return (  
    <div className={style.container}>  
      <div className={style.main}>  
        <IconFont type="iconecs-running" className={style.icon} />  
        <div className={style.label}>{currentNode.label}</div>  
        <div className={style.menu}>  
          <EditMenu node={props}></EditMenu>  
        </div>  
      </div>  
  
      <Handle  
        type="target"  
        position={Position.Left}  
        id="left"  
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave} 
  style={{ borderRadius: 0, transform: `scale(${handleScale})` }}   
      />  
      <Handle  
        type="source"  
        position={Position.Right}  
        id="right"    
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }}   
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave}     
      />  
      <Handle  
        type="source"  
        position={Position.Bottom}  
        id="bottom"  
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }}   
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave}  
      />  
      <Handle  
        type="target"  
        position={Position.Top}  
        id="top"  
        style={{ borderRadius: 0, transform: `scale(${handleScale})` }}   
        onMouseEnter={handleMouseEnter}  
        onMouseLeave={handleMouseLeave}   
      />    </div>  
  );  
};  
export default ActionStatus;